<template>
  <div class="w-full h-full flex flex-col justify-start items-center overflow-x-hidden overflow-y-auto border-r border-gray-300 border-t">
    <div class="w-full h-12 juzhong cursor-pointer text-xl border-b-2 border-white hover:text-blue-600 active:text-red-500 flex-shrink-0" v-for="(item,index) in menulist[activeIndex].children" :key="item" :class="[activemenu===item.id?'bg-blue-300 text-white':'']" @click="dianji(item)"><span>{{item.name}}</span></div>
  </div>
</template>

<script setup>
import {computed, ref} from "vue"
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
const store = useStore()
const route = useRoute()
const router = useRouter()

const menulist = computed(()=>store.state.navrouter.caidan)
const activeIndex = computed(()=>store.state.navrouter.activeindex1)
const activemenu = computed(()=>store.state.navrouter.activeindex2)
// 点击左侧的菜单，跳转到响应的页面
const dianji=(item)=>{
  store.commit("navrouter/clickmenu",item)
  router.push({name:item.pathName})
}
</script>

<style scoped>

</style>
